<template>
    <!-- 小分类 -->
    <div class="classifysmall-view">
        <van-sticky>
            <base-nav title="商品列表" :show-right="true"></base-nav>
        </van-sticky>
        <!-- 标题 -->
         <h3 class="title">{{ route.query.catName }}</h3>
        <!-- 分类列表 -->
        <van-tabs v-model:active="active" @change="changeHandler">
		  <van-tab v-for="item in smallList" :key="item.id" :name="item.product_content" :title="item.product_content"></van-tab>
		</van-tabs>
        <!-- 排序 -->
         <div class="sort">
            <van-tabs v-model:active="sortActive" @change="sortChangeHandler">
                <van-tab title="推荐" :name="'recommend'"></van-tab>
                <van-tab title="价格" :name="'price'">  
                     <template #title>
                        <!-- 价格排序 -->
                        <div class="sort-price" @click="sortPrice">
                            <p>价格</p>
                            <!-- 图片 -->
                            <div class="price" v-show="sortPriceBS == null">
                                <van-image
                                width="7"
                                height="7"
                                src="http://imgs-qn.iliangcang.com/ware/sowhatimg/ware/orig/2/27/27658.png"
                                />
                                <van-image
                                width="7"
                                height="7"
                                src="http://imgs-qn.iliangcang.com/ware/sowhatimg/ware/orig/2/27/27659.png"
                                />
                            </div>
                            <div class="price" v-show="sortPriceBS">
                                <van-image
                                width="7"
                                height="7"
                                src="https://imgs-qn.iliangcang.com/ware/sowhatimg/ware/orig/2/27/27657.png"
                                />
                                <van-image
                                width="7"
                                height="7"
                                src="http://imgs-qn.iliangcang.com/ware/sowhatimg/ware/orig/2/27/27659.png"
                                />
                            </div>
                            <div class="price"  v-show="!sortPriceBS && sortPriceBS != null" >
                                <van-image
                                width="7"
                                height="7"
                                src="http://imgs-qn.iliangcang.com/ware/sowhatimg/ware/orig/2/27/27658.png"
                                />
                                <van-image
                                width="7"
                                height="7"
                                src="https://imgs-qn.iliangcang.com/ware/sowhatimg/ware/orig/2/27/27656.png"
                                />
                            </div>
                        </div>
                    </template>
                </van-tab>
                <!-- 新品列表 -->
                <van-tab title="新品" :name="'newProduct'"></van-tab>
            </van-tabs>
         </div>
         <!-- 商品组件 -->
        <div class="goods-list">
            <div v-show="!searchList.length" class="product-null"><img src="../assets/img/productnull.png"></div>
            <goods v-for="item in searchList" :goods="item" ></goods>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { onMounted, ref } from 'vue';
    import API from '../api'
    import { userBaseStore } from '../store';
    import { useRoute } from 'vue-router';

    
  

    let baseStore = userBaseStore();

    //  接收route
    let route = useRoute();

    let active = ref(route.query.smallName);

    let sortActive = ref('recommend');

    // console.log(active);
    // 分类列表数据
    let smallList = ref([]);
	// 小分类数据
	let searchList = ref([]);
    // 校验排序
    let sortPriceBS = ref();

    // 推荐
    let likeList = ref([]);

   

    // 排序数据
    let sortList = ref([]);

    


    //钩子函数
    onMounted(async ()=>{
     await baseStore.getClassifyAllData();
     baseStore.classifyAllList.forEach((item) => {
            if(item.cat_id == route.query.catId){
                smallList.value = item.data;
            };
        });
    //  进去需要请求一次
     let even = await API.getData('/api_search',{keywords: route.query.smallName?.slice(0,2)})

     searchList.value = even;
   
   

     sortList.value = even;
     
        
    });

    // 排序切换事件
    let sortChangeHandler = async(val) =>{
    
        // 推荐
        if(val == 'recommend'){
            searchList.value = await API.getData('/api_search',{keywords: active.value?.slice(0,2)})
            
        // 价格排序
        }else if(val == 'price'){
           
            searchList.value = sortList.value.sort((a:Goods , b:Goods) => a.price - b.price);
            sortPriceBS.value = true;

            
        // 推荐
        }else if(val == 'newProduct'){
            let even = await API.getData('/api_goods',{page: parseInt(Math.random()*10+1) , pagesize: 6})
            likeList.value = even;
            searchList.value = likeList.value;
        }
        
    };
    // 价格排序
    let sortPrice = () =>{

        // 校验点击
        if(sortPriceBS.value){
            // console.log("1111");
            searchList.value = sortList.value.reverse();
            sortPriceBS.value = false;
            // console.log( sortPriceBS.value);
        }else {
            // console.log("2222");
            searchList.value = sortList.value.reverse();
            sortPriceBS.value = true;
        };
        
    };

    //事件切换
    let changeHandler = async (val) =>{
        let even = await API.getData('/api_search',{keywords: val?.slice(0,2)})

        sortActive.value = 'recommend';

        searchList.value = even;
       
        sortList.value = even;
    }
</script>

<style lang="less">
    // 排序部分样式
    .sort-price{
        display: flex;
        align-items: center;
        margin-right: 20px;
        .price{
           
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            &:first-child{
                margin-bottom: 5px;
            }
        }
        
    }
    
    .sort{
        margin-top: 5px;
        border-top:1px solid #000 ;
        border-bottom:1px solid #000 ;
    }
    .title{
        font-size: 16px;
		
		color: #666;
		text-align: center;
		padding: 10px 0px;
    }
    // 商品列表
    .goods-list{
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0px;
    }
    // 为空样式
    .product-null{
        width: 100%;
        display: flex;
        justify-content: center;
        img{
            width: 50%;
            
        }
    }
</style>